<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="build/css/index.css">
    <script src="libs/jquery/jquery-1.8.3.min.js"></script>
    <script src="libs/vue/vuedev.js"></script>
    <script src="libs/echarts.min.js"></script>
    <script src="datas.js"></script>
    <script>
      
    </script>
</head>
<body>
    <!-- partition 分区 -->
     <div class="vm">
         <!-- 综合保障计划1111 -->
         <div class="family"  v-if="rootData.type==1">
            <div class="wrap cover  headercover">
                <img :src="rootData.coverImg" alt="">
                <div class="header-cover-desc">本方案专为 {{rootData.name}} 定制</div>
                <div class="cover-createtime">{{rootData.createTime}}</div>
            </div>
            <div class="wrap cover"   v-for="item in rootData.publicizeImgList">
                    <img :src="item" alt="">
            </div>
             <div class="wrap familyMembers">
                 <div class="top-wrap">
                     <div class="icon-title">
                         <img src="images/family/familyusers.png"/>
                         <div>家庭成员基本信息</div>
                     </div>
                     <p class="decs">根据您提供的信息，我们整理成您的家庭成员基本信息表，如下所示</p>
                 </div>
                 <div class="main-content">
                     <table class="userlist" border="1" style="border-collapse:collapse;">
                        <tr>
                            <th></th>
                            <th></th>
                        </tr>
                        <tbody>
                            <tr>
                                <td class="left" rowspan="5">
                                    <div>
                                        <img src="images/family/mypic.png" alt="">
                                        <div>{{rootData.name}}</div>
                                    </div>
                                </td>
                                <td class="right">年龄：{{rootData.age}}岁</td>
                            </tr>
                            <tr>
                                <td class="right">个人年收入：{{rootData.yearIncome}}万元</td>
                            </tr>
                            <tr>
                               <td class="right">收入中用于个人花费占比：{{rootData.yearExpendRatio}}%</td>
                           </tr>
                           <tr>
                               <td class="right">计划退休年龄：{{rootData.planRetireAge}}岁</td>
                           </tr>
                           <tr>
                               <td class="right">社会医疗保险：有</td>
                           </tr>
                        </tbody>
                        <tbody>
                            <tr>
                                <td  class="left"  rowspan="5">
                                    <div>
                                        <img src="images/family/mypic.png" alt="">
                                        <div>您的配偶</div>
                                    </div>
                                </td>
                                <td class="right">年龄：{{rootData.spouseAge}}岁</td>
                            </tr>
                            <tr>
                                <td class="right">个人年收入：{{rootData.spouseYearIncome}}万元</td>
                            </tr>
                            <tr>
                               <td class="right">收入中用于个人花费占比：{{rootData.spouseYearExpendRatio}}%</td>
                           </tr>
                           <tr>
                               <td class="right">计划退休年龄：{{rootData.spousePlanRetireAge}}岁</td>
                           </tr>
                           <tr>
                               <td class="right">社会医疗保险：有</td>
                           </tr>
                        </tbody>
                        <tbody  v-if="rootData.isChildren=='Y'" v-for="(item,index) in rootData.childrenList" :key="'childrenList'+index">
                            <tr >
                                <td  class="childleft"  rowspan="2">
                                    <div>
                                        <img src="images/family/mychild.png" style="margin-right:10px" alt="">
                                        <div>{{item.childrenName}}</div>
                                    </div>
                                </td>
                                <td class="right">年龄：{{item.childrenAge}}岁</td>
                            </tr>
                            <tr>
                                <td class="right">社会医疗保险：{{item.childrenInsurance}}</td>
                            </tr>
                     
                        </tbody>
                     </table>

                     <div class="conten-big-title-wrap  mt94">
                        家庭保障规划的意义
                     </div>

                     <div class="context">
                        在资金宽裕时缴纳保险费，在面临危难时得到经济上的援助，保障家庭生活平稳、有序，这是保险规划的最根本目的，也是家庭理财规划中对保险的基本定位。目前需要规避的常见风险类型及其匹配险种如下。
                     </div>

                     <table class="jtbzyy" border="1" style="border-collapse:collapse;">
                         <tr>
                             <td>风险类型</td>
                             <td>特征</td>
                             <td>匹配险种</td>
                         </tr>
                         <tr>
                            <td>早亡风险</td>
                            <td>在被保险人死亡时给予相应赔付</td>
                            <td>人寿保险</td>
                        </tr>
                        <tr>
                            <td>意外风险</td>
                            <td>在被保险人遭受外来意外伤害时给予赔付</td>
                            <td>重大疾病保险</td>
                        </tr>
                        <tr>
                            <td>重大疾病风险</td>
                            <td>在被保险人遭受外来意外伤害时给予赔付</td>
                            <td>重大疾病保险</td>
                        </tr>
                        <tr>
                            <td>一般医疗风险</td>
                            <td>在被保险人产生相关医疗支出时给予补偿</td>
                            <td>医疗保险</td>
                        </tr>
                     </table>

                     <div class="context">
                        构建一个完整的家庭保障计划并不是一两张保单能够完成的，也不是保单越多越好。保单过少，家庭的保障不够全面，仍然会暴露在各种风险当中。保单过多，过度投保产生过多的保费支出，也是一种浪费。
                     </div>
                     <div class="context">
                        因此，我们需要对家庭成员所需的合理保额进行测算，测算保险保额的目的也是为了用最合理的保费支出去建立最全面的风险保障。
                     </div>

                 </div>
             </div>
             <div class="wrap familymeasure">
                 <div class="measure-header">
                    <div class="icon-title">
                        <img src="images/family/baoecesuan.png"/>
                        <div>家庭保额测算</div>
                    </div>
                 </div>
                 <div class="measure-main">
                     <div class="life-measure">
                         <div class="life-desc">
                            <div class="conten-big-title-wrap ">
                                人寿保险保额测算
                             </div>
                             <div class="context-one">我们以生命价值法计算现阶段家庭成员人寿保险保额</div>
                             <div class="context">生命价值法计算寿险保额的逻辑是：首先，估计被保险人以后的年均收入；接下来，确定被保险人的退休年龄；最后，从年收入中扣除各种税收、保费、生活费等支出，剩余的资金假设贡献给他人——这就是被保险人的生命价值。</div>
                         </div>
                         <div class="life-table">
                             <table  border="1" style="border-collapse:collapse;">
                                 <tr>
                                     <th>家庭成员</th>
                                     <th>保额测算（万元）</th>
                                     <th>建议保额（万元）</th>
                                 </tr>
                                 <tr  v-for="(item,index) in rootData.insuranceList1"  :key="'renshou'+index">
                                    <td>{{item.memberKey}}</td>
                                    <td>{{item.calculateKey}}</td>
                                    <td>{{item.suggestKey}}</td>
                                 </tr>
                             </table>
                         </div>
                     </div>
                     <div class="accident-measure">
                        <div class="accident-desc">
                            <div class="conten-big-title-wrap ">
                                意外保险保额测算
                             </div>
                             <div class="context">意外事件带来的伤残和死亡，不仅会给当事人带来身体上的严重伤害，还有可能中断掉当事人的工作收入，基于这个思路，我们会根据家庭成员的工作收入，结合客户所希望替代工作收入的时间，计算出意外保险的初始保额，在这之后，我们还会结合被保险人的生命价值，确定家庭成员的最终合理建议保额（大人的意外保险建议保额以人寿保险保额为上限）。</div>
                             <div class="context">经过测算，家庭成员现阶段意外保险保障需求如下表所示。</div>
                         </div>
                         <div class="accident-table">
                            <table  border="1" style="border-collapse:collapse;">
                                <tr>
                                    <th>家庭成员</th>
                                    <th>保额测算（万元）</th>
                                    <th>建议保额（万元）</th>
                                </tr>
                                <tr   v-for="(item,index) in rootData.insuranceList2"  :key="'yiwai'+index">
                                    <td>{{item.memberKey}}</td>
                                    <td>{{item.calculateKey}}</td>
                                    <td>{{item.suggestKey}}</td>
                                </tr>
                            </table>
                            <div  class="context">为了防范道德风险的发生，未成年子女在配置人寿保险、意外伤害保险时，监管部门有规定最高保障的限额，即便是成年的子女，通常也不是家庭收入的主要贡献者，所以针对家庭中的子女，我们会通过统一的标准，给到子女人寿保险、意外伤害保险的保障建议（子女的人寿保险、意外伤害保险保额为大人相应保障的建议保额下限）。</div>
                        </div>
                     </div>
                 </div>
             </div>
             <div class="wrap familydisease">
                 <div class="disease-main">
                    <div class="disease-measure">
                        <div class="disease-desc">
                           <div class="conten-big-title-wrap ">
                                重大疾病保险保额测算
                            </div>
                            <div class="context">人们在确诊罹患特定的重大疾病时，可以获得重疾保险一笔过的赔付，赔付的金额和实际产生的医疗费用无关；医疗保险多是属于实报实销的险种，可报销的医疗费用包括重大疾病产生的特定医疗费用。</div>
                            <div class="context">在保险规划中，重疾保险的给付从某种程度上来讲，可以看作是：对人们因罹患重大疾病失去的工作收入做出的补偿。所以，重疾保险的保额测算时，我们会把保险的保额和被保险人的收入进行挂钩，不仅兼顾到客户的保费支付能力，还可以按照个人意愿，通过保险赔付对人们失去的工作收入进行补偿。</div>
                            <div class="context" style="color:#ea5a41">经过测算，家庭成员现阶段重疾保险保障需求如下表所示。</div>
                        </div>
                        <div class="disease-table">
                            <table  border="1" style="border-collapse:collapse;">
                                <tr>
                                    <th>家庭成员</th>
                                    <th>保额测算（万元）</th>
                                    <th>建议保额（万元）</th>
                                </tr>
                                <tr   v-for="(item,index) in rootData.insuranceList3"  :key="'zhongxian'+index">
                                    <td>{{item.memberKey}}</td>
                                    <td>{{item.calculateKey}}</td>
                                    <td>{{item.suggestKey}}</td>
                                </tr>
                            </table>
                            <div class="context" style="color:#ea5a41">医疗保险的保费相对比较便宜，我们根据客户对医疗环境要求的不同，给到了客户不同层次的医疗保险保额配置建议。</div>
                        </div>
                    </div>
                    <div class="disease-measure">
                        <div class="disease-desc">
                           <div class="conten-big-title-wrap ">
                                医疗保险保额测算
                            </div>
                            <div class="context">医疗保险的保费相对比较便宜，我们根据客户对医疗环境要求的不同，给到了客户不同层次的医疗保险保额配置建议。</div>
                            <div class="context" style="color:#ea5a41">经过测算，家庭成员现阶段意外保险保障需求如下表所示。</div>
                        </div>
                        <div class="disease-table">
                            <table  border="1" style="border-collapse:collapse;">
                                <tr>
                                    <th>家庭成员</th>
                                    <th>医疗照护水平</th>
                                    <th>社会医疗保险</th>
                                    <th>建议保额（万元）</th>
                                </tr>
                                <tr   v-for="(item,index) in rootData.insuranceList4"  :key="'yiliao'+index">
                                    <td>{{item.memberKey}}</td>
                                    <td :rowspan="rootData.insuranceList4.length" v-if="index==0">{{item.anticipantMedicalType}}</td>
                                    <td>{{item.socialMedicalInsuranceKey}}</td>
                                    <td>{{item.suggestKey}}</td>
                                </tr>
                            </table>
                            <div class="context">
                                我们针对有社会医疗保险的客户，在医疗保险的保额上做出了一些调整，这种调整不仅同样能够满足客户的保障需求，还可以减轻客户的保费支出压力。
                            </div>
                            <div class="context">在家庭成员中，子女虽不是家庭经济收入的主要来源，但为了锁定子女的花费支出、保障家庭生活的持续稳定，我们基于对医疗环境的不同要求，分别给到了子女不同层次的重大疾病保险、医疗保险保额固定建议（子女的重大疾病保险、医疗保险保额为大人相应保障的建议保额下限）。</div>
                        </div>
                    </div>
                 </div>
             </div>
             <div class="wrap familygap">
                <div class="gap-header">
                    <div class="icon-title">
                        <img src="images/family/gap-iocn.png"/>
                        <div>家庭保障缺口</div>
                    </div>
                 </div>
                 <div class="gap-main"> 
                        <table border="1" style="border-collapse:collapse;">
                                <tr>
                                    <th>被保险人</th>
                                    <th>保额测算</th>
                                    <th>建议保额（万元）</th>
                                    <th>建议保额（万元）</th>
                                    <th>建议保额（万元）</th>
                                </tr>
                                <tbody v-for="(item , io) in rootData.gapList" :key="'gapList'+io">
                                    <tr>
                                        <td rowspan="5">{{item.memberKey}}</td>
                                        <td>社会医疗保险</td>
                                        <td colspan="3">{{item.sKey}}</td>
                                    </tr>
                                    <tr>
                                        <td>人寿保险</td>
                                        <td>{{item.insuranceKey1[0]}}</td>
                                        <td>{{item.insuranceKey2[0]}}</td>
                                        <td>{{item.insuranceKey3[0]}}</td>
                                    </tr>
                                    <tr>
                                        <td>意外保险</td>
                                        <td>{{item.insuranceKey1[1]}}</td>
                                        <td>{{item.insuranceKey2[1]}}</td>
                                        <td>{{item.insuranceKey3[1]}}</td>
                                    </tr>
                                    <tr>
                                        <td>重疾保险</td>
                                        <td>{{item.insuranceKey1[2]}}</td>
                                        <td>{{item.insuranceKey2[2]}}</td>
                                        <td>{{item.insuranceKey3[2]}}</td>
                                    </tr>
                                    <tr>
                                        <td>医疗保险</td>
                                        <td>{{item.insuranceKey1[3]}}</td>
                                        <td>{{item.insuranceKey2[3]}}</td>
                                        <td>{{item.insuranceKey3[3]}}</td>
                                    </tr>
                                </tbody>
                            </table>     
                 </div>               
             </div>
             <!-- 推荐 -->
             <div class="warp recommend">
                    <div class="recommend-header">
                        <div class="icon-title">
                            <img src="images/family/recommend.png"/>
                            <div>家庭保障方案推荐</div>
                        </div>
                        <p>根据保障缺口，我们建议您如下配置家庭保障方案。</p>
                    </div>
                    <div class="recommend-main">
                        <div v-for="(item,index) in rootData.gapList"  v-if="index<2"   :key="index">
                            <div class="conten-big-title-wrap " >
                                    {{index==0?'您本人保障方案':''}}
                                    {{index==1?'您配偶保障方案':''}}
                            </div>
                            <div  >
                                    <div  :id="'myChart'+(index+1)" class="pie"  :style="{width: '19.7rem', height: '9rem'}"></div>
                            </div>
                        </div>
                    </div>
             </div>

             <div class="warp recommend" v-if="rootData.gapList.length>2">
                <div class="recommend-main">
                    <div v-for="(item,index) in rootData.gapList" v-if="index>1"  :key="index">
                            <div class="conten-big-title-wrap " >
                                    您{{rootData.childrenList[index-2].childrenAge}}岁孩子保障方案
                            </div>
                            <div>
                                <div  :id="'myChart'+(index+1)" class="pie"  :style="{width: '19.7rem', height: '9rem'}"></div>
                            </div>
                    </div>
                </div>
             </div>

             <!-- 免责条款 -->
             <div class="wrap Liability">
                <img src="images/footer.jpg" alt="">
             </div>
         </div>

         <!-- 子女教育计划 2222 -->

         <div class="education"   v-if="rootData.type==2">
                <div class="wrap cover  headercover">
                    <img :src="rootData.coverImg" alt="">
                    <div class="header-cover-desc">本方案专为 {{rootData.name}} 定制</div>
                    <div class="cover-createtime">{{rootData.createTime}}</div>
                </div>
                <div class="wrap cover"   v-for="item in rootData.publicizeImgList">
                        <img :src="item" alt="">
                </div>
                <div class="wrap base-info">
                    <div class="base-header">
                        <div class="icon-desc">
                            <div><img src="images/education/baseuser-icon.png" alt="">您的基本信息</div>
                        </div>
                        <div class="head-main">
                           <div class="tr-main">
                            <div>
                                <div style="line-height:1.6rem">姓名：{{rootData.name}}</div>
                                <div style="line-height:1.6rem">孩子年龄：{{rootData.childAge}}岁</div>
                                <div style="line-height:1.6rem">孩子的最高教育目标：{{rootData.educationTarget}}</div>
                            </div>
                            <div><img src="images/education/baseuser-pic.png" alt=""></div> 
                           </div>
                        </div>
                    </div>
                    <div class="target-main">
                        <div class="icon-desc">
                            <div style="color:#325c96"><img src="images/education/target-education.png" alt="">教育目标分析</div>
                        </div>
                        <div>子女教育是和人们基本生活密切相关的重要目标，在所有的理财目标中，教育金的储备最为缺乏时间弹性和费用弹性，除此之外，教育金储备时间期限和家庭财务的增长潜力，这些因素都会对储备教育金的投资方案产生影响。</div>
                        <div style="">
                            <div  id="mygossipChart" class="figure"  :style="{width: '100%', height: '12rem'}"></div>
                        </div>
                        <p class="radar-p">雷达图显示的是该子女教育计划的基本特征</p>
                    </div>
                </div>  
                <div class="wrap moneycompute">
                    <div class="moneycompute-header">
                        <div class="icon-title">
                            <img src="images/family/gap-iocn.png"/>
                            <div>教育金需求测算</div>
                        </div>
                    </div> 
                    <div class="moneycompute-main">
                        <div style="margin-bottom:.67rem">
                            <div class="icon-desc">
                                <div style="color:#325c96"><img src="images/education/target-education.png" alt="">教育支出</div>
                            </div>
                        </div>
                        <table border="1" class="floor1tb" style="border-collapse:collapse;">
                            <tr>
                                <th  v-for="(item,index) in table1.th" :key="index+'th'">{{item}}</th>
                            </tr>
                            <tbody v-if="table1.tr.length>0" >
                                <tr   v-for="(item,index) in table1.tr"  :key="'tr'+index">
                                    <td  v-for="(td,jsonkey)  in item"  :key="jsonkey">{{td}}</td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="title-jiantou">
                           <img src="images/education/educationexport.png" alt="">
                        </div>

                        <table border="1" class="floor1tb" style="border-collapse:collapse;">
                            <tr>
                                <th  v-for="(item,index) in table2.th" :key="index+'th'">{{item}}</th>
                            </tr>
                            <tbody v-if="table2.tr.length>0" >
                                <tr   v-for="(item,index) in table2.tr"  :key="'tr'+index">
                                    <td  v-for="(td,jsonkey)  in item"  :key="jsonkey">{{td}}</td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="trend">
                             <div>
                                我们把你每一年的教育金需求金额，按照比例5.46%（通胀水平）的折现率，折现至{{rootData.educationReoprt.discountingData.discountingYear}}年，以此确定你的教育金总需求金额为{{rootData.educationReoprt.discountingData.discountingTotal}}万元   
                            </div>
                            <div class="trend-chart-wrap">
                                <div>教育费用总支出</div>
                                <div></div>
                                <div>
                                    <div>{{rootData.educationReoprt.discountingData.discountingTotal}}</div>
                                    <div>万元</div>
                                </div>
                            </div>
                        </div>

                        <div class="trend-to-wrap"><img src="images/trend-to.png" alt=""></div>

                   

                    </div>
                </div>   
                
                <div class="wrap suggest"  v-if="rootData.educationReoprt.recommend.length>0">
                    <div class="suggest-head">
                        <div class="icon-desc">
                            <div><img src="images/education/child-sugges.png" alt="">子女教育推荐建议</div>
                        </div>
                        <div class="suggest-head-desc"> 
                            经过测算，您只需要
                            <span  v-for="item in rootData.educationReoprt.recommend">
                                {{item.suggest}}{{rootData.educationReoprt.recommend.length>=2?'；':','}}
                            </span>，        
                            本配置方案产生的预期回报可以在子女读大学之前帮您达成子女教育金储备的目标。                                           
                        </div>
                    </div>
                    <div class="suggest-main">
                        <div class="conten-big-title-wrap ">
                            教育方案总预览
                        </div>
                        <table  class="plan-pre-view" border="1" style="border-collapse:collapse;">
                            <tr>
                                <td>产品类型</td>
                                <td>收益率</td>
                                <td>总计投入</td>
                                <td>目标总额</td>
                                <td>储备方式</td>
                            </tr>
                            <tr v-for="(item,index) in initMsg">
                                <td>{{item.name}}</td>
                                <td>{{item.rate}}%</td>
                                <td>{{item.total}}</td>
                                <td>{{item.targetTotal}}</td>
                                <td style="width: 4.5rem;font-size: .5rem">{{item.suggest}}</td>
                            </tr>
                            <!-- <tr>
                                <td>康寿教育险</td>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                            </tr> -->
                        </table>

                        <div class="myLine-wrap">
                            <div  id="myLine"  :style="{width: '100%', height: '12rem'}"></div>
                        </div>
                    </div>
                </div>

                 <!-- 免责条款 -->
             <div class="wrap Liability">
                <img src="images/footer.jpg" alt="">
             </div>
         </div>

         <!-- 养老计划 3333  -->
         <div class="family"  v-if="rootData.type==3">
                <div class="wrap cover  headercover">
                    <img :src="rootData.coverImg" alt="">
                    <div class="header-cover-desc">本方案专为 {{rootData.name}} 定制</div>
                    <div class="cover-createtime">{{rootData.createTime}}</div>
                </div>
                <div class="wrap cover"   v-for="item in rootData.publicizeImgList">
                        <img :src="item" alt="">
                </div>
                <div class="wrap base-info">
                    <div class="base-header">
                        <div class="icon-desc">
                             <div><img src="images/education/baseuser-icon.png" alt="">您的基本信息</div>
                        </div>
                        <div class="head-main">
                            <div class="tr-main">
                            <div>
                                <div style="line-height:1.1rem">姓名：{{rootData.name}}</div>
                                <div style="line-height:1.1rem">年龄：{{rootData.age}}岁</div>
                                <div style="line-height:1.1rem">计算退休年龄：{{rootData.retireAge}}岁</div>
                                <div style="line-height:1.1rem">期望退休后年生活费：{{rootData.expectLiveCosts}}万元</div>
                                <div style="line-height:1.1rem">社保情况：{{rootData.isSocialSecurity}}</div>
                            </div>
                            <div><img src="images/education/baseuser-pic.png" alt=""></div>
                            </div>
                        </div>
                    </div>
                    <div class="target-main">
                        <div class="icon-desc">
                            <div style="color:#325c96"><img src="images/old/Provide-aged.png" alt="">养老压力指数</div>
                        </div>
                        <div style="">
                            <div  id="mygossipChart" class="figure"  :style="{width: '100%', height: '12rem'}"></div>
                        </div>
                        <div class="older-target">
                            <div class="older-target-wrap">
                                <div class="older-apple">
                                    <div>{{rootData.retireReports.pressure.grade}}</div>
                                    <div>养老指数压力</div>
                                </div>
                                <img src="images/old/oldder-center.png" alt="">
                                <div class="thr">
                                    <div>养老压力大于 <span  style="color:#ea5940">全国{{rootData.retireReports.pressure.percent}}%的人</span></div>
                                    <img src="images/old/oldder-right.png" alt="">
                                    <div>
                                        需准备 <span style="color:#ea5940;font-size:.7rem">{{rootData.retireReports.pressure.gapMoney}}</span>  万元的养老金          
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>   
                
                <div class="wrap moneycompute">
                    <div class="moneycompute-header">
                        <div class="icon-title">
                            <img src="images/family/gap-iocn.png"/>
                            <div>养老金缺口测算</div>
                        </div>
                    </div> 
                    <div class="moneycompute-main">
                        <table border="1" class="floor1tb" style="border-collapse:collapse;">
                                <tr>
                                    <th>时间</th>
                                    <th>退休金收入</th>
                                    <th>生活支出</th>
                                    <th>养老金缺口</th>
                                    <th>折现至2053年</th>
                                </tr>
                                <tr  v-for="(item,index) in rootData.retireReports.retireList.slice(0,9)"  :key="'renshou'+index">
                                    <td>{{item.year}}年</td>
                                    <td>{{item.retireIncome}}万元</td>
                                    <td>{{item.retireExpend}}万元</td>
                                    <td>{{item.gap}}万元</td>
                                    <td>{{item.discounting}}万元</td>
                                </tr>
                                <tr v-if="rootData.retireReports.retireList.length>12">
                                    <td>...</td>
                                    <td>...</td>
                                    <td>...</td>
                                    <td>...</td>
                                    <td>...</td>
                                </tr>
                                <tbody  v-if="rootData.retireReports.retireList.length>12">
                                    <tr  v-for="(item,index) in rootData.retireReports.retireList.slice(-2)"  :key="'shou'+index">
                                        <td>{{item.year}}</td>
                                        <td>{{item.retireIncome}}</td>
                                        <td>{{item.retireExpend}}</td>
                                        <td>{{item.gap}}</td>
                                        <td>{{item.discounting}}</td>
                                    </tr>
                                </tbody>
                            </table>

                        <div class="trend">
                                <div>
                                我们把你每一年的养老金缺口，按照比例5.46%（通胀水平）的折现率，折现至{{rootData.retireReports.discountingYear}}年，以此确定你的养老金总缺口为 {{rootData.retireReports.disGap}}万元   
                            </div>
                            <div class="trend-chart-wrap">
                                <div>养老金总缺口</div>
                                <div></div>
                                <div>
                                    <div>{{rootData.retireReports.disGap}}</div>
                                    <div>万元</div>
                                </div>
                            </div>
                        </div>

                        <div class="trend-to-wrap"><img src="images/trend-to.png" alt=""></div>
                    </div>
                </div>  
                
                <div class="wrap suggest"  v-if="rootData.retireReports.recommend.length>0">
                    <div class="suggest-head">
                        <div class="icon-desc">
                          <div> <img src="images/education/child-sugges.png" alt="">养老推荐建议</div>
                        </div>
                        <div class="suggest-head-desc"> 
                                经过测算，您只需要
                                <span  v-for="item in rootData.retireReports.recommend">
                                    {{item.suggest}}{{rootData.retireReports.recommend.length>=2?'；':','}}
                                </span>，
                                本配置方案产生的预期回报可以帮您在退休后达成养老金储备的目标。                                                                       
                        </div>
                    </div>
                    <div class="suggest-main">
                        <div class="conten-big-title-wrap ">
                                养老金方案总预览
                        </div>
                        <table  class="plan-pre-view" border="1" style="border-collapse:collapse;">
                            <tr>
                                <td>产品类型</td>
                                <td>收益率</td>
                                <td>总计投入</td>
                                <td>目标总额</td>
                                <td>储备方式</td>
                            </tr>
                            <tr v-for="(item,index) in initMsg">
                                <td>{{item.name}}</td>
                                <td>{{item.rate}}%</td>
                                <td>{{item.total}}</td>
                                <td>{{item.targetTotal}}</td>
                                <td style="width: 4.5rem;font-size: .5rem">{{item.suggest}}</td>
                            </tr>
                            <!-- <tr>
                                <td>康寿教育险</td>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                            </tr> -->
                        </table>

                        <div class="myLine-wrap">
                            <div  id="myLine"  :style="{width: '100%', height: '12rem'}"></div>
                        </div>
                    </div>
                </div>

            <!-- 免责条款 -->
             <div class="wrap Liability">
                <img src="images/footer.jpg" alt="">
            </div>

         </div>
     </div>
      
     <script src="build/js/index.js"></script>
     <script src="libs/main.js"></script>
</body>
</html>